<template>
    <div class="wishList">
        <van-tabs  v-model="active" sticky swipeable  color="#FD5A63" title-active-color="#FD5A63" title-inactive-color="#333" @click="tabBtnClick"> 
            <van-tab v-for="(item,index) in tabList" :title="item.name" :key="index">
                <div v-if="index == 0 && cityList.length != 0" class="cityList">
                    <div class="citylistWp">
                        <p class="title">已超过<span>18％</span>的人，新的一年加油去这个世界多看看</p>
                        <div class="list clear">
                            <div class="one" v-for="(item) in cityList" :key="item.name">
                                <img :src="'https://basedata.bj.bcebos.com/cityPhoto/'+ item.cityId +'@2x.png'" alt="">
                                <div class="cityName">
                                    <van-icon name="location" color="#FD5A63" />&nbsp;{{item.cityName}}
                                </div>
                                <div class="country">
                                    {{item.countryName}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="productType != 5" class="refreshList">
                    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
                        <van-list v-model="loading" :finished="finished" @load="onLoad" style="padding-bottom: 2rem;"                 :immediate-check="false">
                            <!-- 加载的内容 -->
                            <div v-for="(item1) in deviceList" :key="item1.name">
                                <div class="list clear">
                                    <div class="img">
                                        <img :src="item1.productPic" alt="">
                                        <div class="sale" v-if="item1.promotionsLabel">
                                            {{item1.promotionsLabel}}
                                        </div>
                                    </div>
                                    <div class="productRight">
                                        <div class="title">{{item1.productName}}</div>
                                        <div class="content clear">
                                            <div class="score">
                                                <div class="span1"><van-icon name="star" color="#FD5A63"/>&nbsp;{{item1.totalRate}}</div>
                                                <div class="span2"><van-icon name="location" color="#666666"/>&nbsp;{{item1.cityName}}</div>
                                            </div>
                                            <div class="proceWp">
                                                <div class="price">￥{{item1.externalPrice}} <span>/人</span> </div>
                                                <div class="oldPrice">
                                                    原价 ¥{{item1.marketPrice}}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="friend">
                                            <div class="div1"><van-icon name="friends" color="#999999"/>&nbsp;{{item1.boughtNumber}}k＋人体验过 </div>
                                            <div class="div2"><van-icon name="clock" color="#999999"/>&nbsp;最早可预定日期：<span>{{item1.reserveDay}}天{{item1.reserveHour}}小时</span> </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </van-list>
                    </van-pull-refresh>
                </div>
                <div class="kong" v-if="cityList.length == 0">
                    <div class="titleCon">
                        心愿单为空哦～ <br>让世界多留下我的足迹
                    </div>
                    <div  class="toBrowse">
                        去浏览
                    </div>
                    <div class="titleBottom">
                        境外吃喝玩乐，你想要的我全知道
                    </div>
                    <div class="recommended">
                        <div class="recommended_top_bg">

                        </div>
                        <div class="re_list">
                            <div class="re_list_title">
                                小伙伴们还喜欢
                            </div>
                            <div class="re_wp clear">
                                <div class="re_one" v-for="item in 4" :key="item">
                                    <img src="" alt="">
                                    <div class="titName">
                                        马尔代夫|旅游服务
                                    </div>
                                    <div class="name">
                                        Super species (超级态sdfsfsfdsdf
                                    </div>
                                    <div class="sorceWp clear">
                                        <div class="sorce">
                                            <van-icon name="star" />4.9
                                        </div>
                                        <div class="price">
                                            ¥122
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="kong" v-if="deviceList.length == 0 && productType != 5 && !loading">
                    <div class="titleCon">
                        心愿单为空哦～ <br>让世界多留下我的足迹
                    </div>
                    <div  class="toBrowse">
                        去浏览
                    </div>
                    <div class="titleBottom">
                        境外吃喝玩乐，你想要的我全知道
                    </div>
                    <div class="recommended">
                        <div class="recommended_top_bg">

                        </div>
                        <div class="re_list">
                            <div class="re_list_title">
                                小伙伴们还喜欢
                            </div>
                            <div class="re_wp clear">
                                <div class="re_one" v-for="item in 4" :key="item.name">
                                    <img src="" alt="">
                                    <div class="titName">
                                        马尔代夫|旅游服务
                                    </div>
                                    <div class="name">
                                        Super species (超级态sdfsfsfdsdf
                                    </div>
                                    <div class="sorceWp clear">
                                        <div class="sorce">
                                            <van-icon name="star" />4.9
                                        </div>
                                        <div class="price">
                                            ¥122
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


            </van-tab>
        </van-tabs>
    </div>
</template>
<script>
// import url from "../url.js";
// import {getLocationParm} from '../assets/js/getLocationParm.js';
// import { Toast } from 'mint-ui';
import {
    Tab,
    Tabs,
    Icon,
    PullRefresh,
    List
} from "vant";
let localStorage = window.localStorage;
export default {
    components: {
        [Tab.name]:Tab,
        [Tabs.name]:Tabs,
        [Icon.name]:Icon,
        [PullRefresh.name]:PullRefresh,
        [List.name]:List
    },
    data() {
        return {
            tabList:[
                {
                    'id':5,
                    'name':'目的地'
                },
                {
                    'id':50,
                    'name':'娱乐'
                },
                {
                    'id':40,
                    'name':'体验'
                },
                {
                    'id':10,
                    'name':'美食'
                },
                {
                    'id':30,
                    'name':'线路'
                },
                {
                    'id':20,
                    'name':'票务'
                }
            ],
            active:0,
            // 目的地列表
            cityList:[],

            deviceList: [],//用于存放加载的数据
            totalPage: 0,
            pageNumber: 1,
            loading: false,//控制上拉加载的加载动画
            finished: false,//控在页面往下移动到底部时是否调用接口获取数据
            isLoading: false,//控制下拉刷新的加载动画

            productType:5,
            

        }
    },
    directives: {

    },
    created: function() {
        this.getToken();
        
    },
    computed: {

    },
    watch: {

    },
    mounted() {
        
    },
    methods: {
        getToken(){
            // console.log(getLocationParm('token'))
            let tokenString = 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJyYW5kb21LZXkiOiJuZ3IxNHQiLCJzdWIiOiJ7XCJ1c2VySWRcIjo5NTkyfSIsImV4cCI6MTU1MjY0OTgxOCwiaWF0IjoxNTUxMTc4NTg5fQ.4r_gHDIAzmu6Jwhj89hNM0Czu6rl8SmItAI4E3X8A3I0vIslMIsjhbD7svUGEOIhMkNLyDUKpsQKJvh1kZ0iZw';
            localStorage.setItem('token',tokenString);
            // if(getLocationParm('token')){
            //     window.localStorage.getItem(getLocationParm('token')) 
            // }
            this.initData();
        },
        initData(){
            this.initDataFn()
            .then(data =>{
                console.log(data)
                if(data.code == 200){
                    this.cityList = data.data.destinations;
                }else{
                    Toast({
                      message: data.desc,
                      position: 'bottom',
                      duration: 5000
                    });
                }
            },data=>{
                Toast({
                    message: data.desc,
                    position: 'bottom',
                    duration: 5000
                });
            })
        
        },
        initDataFn(){
            return new Promise((resolve,reject)=>{
                this.axios
                .get(url.wishCity)
                .then(result => {
                    resolve(result.data);
                }).catch(result => {
                    console.log(result)
                });
            })

        },
        init() {
            if(this.loading){
                return false;
            }
            let data = {
                pageNum: this.pageNumber,
                pageSize:5,
                productType:this.productType,
            };
            this.initFn(data)
            .then(data =>{
                console.log(data)
                if(data.code == 200){
                        this.deviceList = data.data.list;
                        this.totalPage = data.data.total/1;
                        this.isLoading = false; //关闭下拉刷新效果
                        this.finished = false;
                        this.pageNumber++;
                }else{
                    Toast({
                      message: data.desc,
                      position: 'bottom',
                      duration: 5000
                    });
                }
            },data=>{
                Toast({
                    message: data.desc,
                    position: 'bottom',
                    duration: 5000
                });
            })
        },
        initFn(data){
            return new Promise((resolve,reject)=>{
                this.axios
                .post(url.wishList,data)
                .then(result => {
                    resolve(result.data);
                }).catch(result => {
                    console.log(result)
                });
            })

        },
        //下拉刷新
        onRefresh() {
            let self = this;
            setTimeout(() => {
                self.totalPage = 0;
                self.pageNumber = 1;
                

                self.init(); //加载数据
            }, 500);
        },
        //页面初始化之后会触发一次，在页面往下加载的过程中会多次调用【上拉加载】
        onLoad() {
            if(this.isLoading){
                return false;
            }
            setTimeout(() => {

                let data = {
                    pageNum: this.pageNumber,
                    pageSize:5,
                    productType:this.productType,
                };
                this.initFn(data)
                .then(data =>{
                    if(data.code == 200){
                        this.totalPage = data.data.total/1;
                        this.deviceList = this.deviceList.concat(data.data.list);
                        this.loading = false;
                        if (this.deviceList.length >= this.totalPage) {
                            this.finished = true;
                        }
                        this.pageNumber++;
                    }else{
                        Toast({
                          message: data.desc,
                          position: 'bottom',
                          duration: 5000
                        });
                    }
                },data=>{
                    Toast({
                        message: data.desc,
                        position: 'bottom',
                        duration: 5000
                    });
                })
            }, 500);
        },
        // tab切换
        tabBtnClick(index, title) {
            this.pageNumber = 1;
            this.totalPage = 0;
            this.deviceList = [];
            if(index == 0){
                this.productType = 5;
                this.initData();
            }else if(index == 1){
                this.productType = 50;
                this.initialization(); //加载数据
            }else if(index == 2){
                this.productType = 40;
                this.initialization(); //加载数据
            }else if(index == 3){
                this.productType = 10;
                this.initialization(); //加载数据
            }else if(index == 4){
                this.productType = 30;
                this.initialization(); //加载数据
            }else if(index == 5){
                this.productType = 20;
                this.initialization(); //加载数据
            }
        },
        initialization(){
            this.loading = true;//下拉加载中
            this.finished = false;//下拉结束
            if(this.loading){
                this.onLoad();
            }
        }

    }
}
</script>
<style lang="less" scoped>
.wishList {
    width: 100%;
    .cityList{
        .citylistWp{
            width: 100%;
            .title{
                font-size:0.6rem;
                font-family:PingFangSC-Regular;
                font-weight:400;
                color:rgba(153,153,153,1);
                line-height:0.825rem;
                text-align: center;
                margin-top: 1.0rem;
                span{
                    color: #FD5A63;
                }
            }
            .list{

                .one{
                    width: 33%;
                    float: left;
                    text-align: center;
                    margin-top: 1.0rem;
                    img{
                        width: 4.5rem;
                        height: 4.5rem;
                        border-radius: 50%;
                    }
                    .cityName{
                        font-size:0.7rem;
                        font-family:PingFangSC-Regular;
                        font-weight:400;
                        color:rgba(51,51,51,1);
                        margin-top: 0.5rem;

                    }
                    .country{
                        font-size:0.5rem;
                        font-family:PingFangSC-Regular;
                        font-weight:400;
                        color:rgba(153,153,153,1);
                        margin-top: 0.05rem;
                    }
                }
            }
        }
    }
    .refreshList{
        .list{
            padding-left: 1.25rem;
            padding-right: 1.25rem;
            margin-top: 1.0rem;
            .img{
                width:5.5rem;
                height:5.5rem;
                background:rgba(230,230,230,1);
                border-radius:0.2rem;
                overflow:hidden;
                float: left;
                position: relative;
                img{
                    width: 100%;
                    height: 100%;
                }
                .sale{
                    width: 1.675rem;
                    height: 1.45rem;
                    border-bottom-right-radius: 0.8rem;
                    position: absolute;
                    left: 0;
                    top: 0;
                    background:#FD5A63;
                    font-size:0.6rem;
                    font-family:PingFangSC-Medium;
                    font-weight:500;
                    color:#ffff;
                    line-height: 1.45rem;
                    text-align: center;
                }
            }
            .productRight{
                float: right;
                width: 10.1rem;
                .title{
                    font-size:0.8rem;
                    font-family:PingFangSC-Regular;
                    font-weight:400;
                    color:rgba(51,51,51,1);
                    line-height:0.9rem;
                    /*margin-bottom:0.7rem;*/
                    width: 100%;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
                .content{
                    border-bottom: 0.025rem solid #E6E6E6;
                    padding-bottom: 0.45rem;
                    padding-top: 0.45rem;
                    .score{
                        float: left;
                        width: 60%;
                        .span1{
                            font-size:0.7rem;
                            font-family:PingFangSC-Medium;
                            font-weight:500;
                            color:rgba(253,90,99,1);
                            /*line-height:0.5rem;*/
                            line-height: 0.8rem;

                        }
                        .span2{
                            font-size:0.5rem;
                            font-family:PingFangSC-Regular;
                            font-weight:400;
                            color:#999999;
                            /*margin-top: 0.2rem;*/
                            /*line-height:0.5rem;*/

                            width: 100%;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            line-height: 0.6rem;
                            margin-top: 0.325rem;
                        }
                        
                    }
                    .proceWp{
                        float: right;
                        width: 40%;
                        .price{
                            font-size:0.7rem;
                            font-family:PingFangSC-Medium;
                            font-weight:500;
                            color:rgba(253,90,99,1);
                            width: 100%;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            line-height: 0.8rem;
                            span{
                                font-size:0.5rem;
                                font-family:PingFangSC-Regular;
                                font-weight:400;
                                color: #999;
                            }
                        }
                        .oldPrice{
                            /*margin-top: 0.5rem;*/
                            font-size:0.5rem;
                            font-family:PingFangSC-Regular;
                            font-weight:400;
                            color:rgba(153,153,153,1);
                            text-decoration: line-through;
                            /*line-height:0.5rem;*/
                            width: 100%;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            margin-top: 0.325rem;
                        }
                    }
                }
                .friend{
                    font-size:0.6rem;
                    font-family:PingFangSC-Regular;
                    font-weight:400;
                    color:rgba(153,153,153,1);
                    line-height:0.6rem;
                    .div1{
                        margin-top: 0.3rem;
                        /*width: 100%;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;*/
                    }
                    .div2{
                        margin-top: 0.3rem;
                        /*width: 100%;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;*/
                        span{
                            color: #597EF7;
                        }
                    }
                }
            }
        }
    }
    .kong{
        width: 100%;
        padding-bottom: 1.0rem;
        
        .titleCon{
            text-align: center;
            font-size:0.8rem;
            font-family:PingFangSC-Medium;
            font-weight:500;
            color:#333;
            margin-top: 2.05rem;
        }
        .toBrowse{
            text-align: center;
            width:10.0rem;
            height:2.2rem;
            background:rgba(253,90,99,1);
            border-radius:0.1rem;
            line-height: 2.2rem;
            text-align: center;
            color: #fff;
            /*margin-top: 2.225rem;*/
            margin:2.225rem  auto  0.7rem;
        }
        .titleBottom{
            text-align: center;
            font-size:0.6rem;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(153,153,153,1);
            margin-bottom: 2.5rem;
        }

        .recommended{
            .recommended_top_bg{
                position: relative;
                left: 0;
                top: 0;
                width: 100%;
                height: 1.0rem;
                background: -webkit-linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
                background: -moz-linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
                background: -ms-linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
                background: -o-linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
                background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
                opacity: 0.03;
            }
            .re_list{
                .re_list_title{
                    font-size:1.0rem;
                    font-family:PingFangSC-Medium;
                    font-weight:500;
                    color:rgba(51,51,51,1);
                    padding-left: 1.25rem;
                    margin-top: 0.5rem;
                }
                .re_wp{
                    width: 100%;
                    padding-left: 0.55rem;
                    padding-right: 1.25rem;

                    .re_one{
                        width:7.725rem;
                        margin-left: 0.7rem;
                        float: left;
                        margin-top: 0.6rem;
                        img{
                            width:7.725rem;
                            height:7.725rem;
                        }
                        .titName{
                            position: absolute;
                            left: 0.2rem;
                            top: 0.2rem;
                            width:6.1rem;
                            height:1.2rem;
                            background:rgba(0,0,0,0.6);
                            border-radius:0.2rem;
                            font-size:0.6rem;
                            font-family:PingFangSC-Regular;
                            font-weight:400;
                            color:rgba(255,255,255,1);
                            text-align: center;
                            line-height: 1.2rem;

                        }
                        .name{
                            width: 100%;
                            font-size:0.7rem;
                            font-family:PingFangSC-Regular;
                            font-weight:400;
                            color:rgba(51,51,51,1);
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                        }
                        .sorceWp{
                            margin-top: 0.5rem;
                            color: #FD5A63;
                            .sorce{
                                float: left;
                                font-size: 0.7rem;

                            }
                            .price{
                                font-size:0.7rem;
                                font-family:PingFangSC-Medium;
                                font-weight:500;
                                color:rgba(253,90,99,1);
                                float: right;
                            }
                        }
                    }
                }
            }
        }
    }
}
.clear::after {
    content: "";
    display: block;
    clear: both;
}
</style>